<template>
  <div class="role-container">
    <a-form class="headerSerch" layout="inline">
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <a-button style="float: left; margin-top: 10px" @click="showModal()" type="primary">新增</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="roleList"
      class="components-table-demo-nested"
      :pagination="false"
    >
      <a slot="operation" slot-scope="text,record">
        <a-button v-action:update @click="showModal(record)" type="primary">编辑</a-button>
        <a-popconfirm
          title="Are you sure delete this record?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="removeRole(record)"
        >
          <a-button v-action:delete type="danger">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>

    <div class="modal-container">
      <AddModal
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :current="current"
      />
    </div>
  </div>
</template>

<script>
import { getRoleList, addRole, updateRole, removeRole } from '@/api/manage'
import { isNotEmptyList } from '@/utils/util'
import AddModal from './addModal.vue'

export default {
  components: {
    AddModal
  },
  data () {
    return {
      columns: [
        { title: 'id', dataIndex: 'id', key: 'id' },
        { title: '角色名', dataIndex: 'name', key: 'name' },
        { title: '角色描述', dataIndex: 'describe', key: 'describe' },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          customRender: (text) => (text === true ? '启用' : '禁用')
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      roleList: [],
      loading: false,
      visible: false,
      current: undefined
    }
  },

  mounted () {
    this.getRoleList()
  },
  methods: {
    async getRoleList () {
      this.loading = true
      const res = await getRoleList()
      if (isNotEmptyList(res.data.data)) {
        this.roleList = res.data.data
      }
      this.loading = false
    },
    async saveRole (values) {
      let res
      if (values.id) {
        // 编辑
        res = await updateRole(values)
      } else {
        // 新增
        res = await addRole(values)
      }
      if (res) {
        this.$message.success(values.id ? '修改成功' : '添加成功')
        this.visible = false
        this.getRoleList()
      }
    },
    async removeRole (record) {
      const res = await removeRole(record)
      if (res.code === 2000) {
        this.$message.success('删除成功')
        this.getRoleList()
      }
    },

    showModal (record) {
      if (record) {
        this.current = record
      }
      this.visible = true
    },
    handleOk (values) {
      console.log('values', values)
      this.saveRole(values)
      this.visible = false
    },
    handleCancel () {
      this.visible = false
      this.current = undefined
    }
  }
}
</script>

<style scoped>
.role-container {
  position: relative;
}
.modal-container {
  position: absolute;
}
</style>
